<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM结构的改变-2</title>

    <style>

         .box{
               width: 400px;
               height: 400px;
               background-color: green;
         }
    </style>
</head>
<body>

<div id="box1" class="box">

    <div id="innerBox">
        inner Box
    </div>

</div>


<div>
    <button id="btnAppend">新增</button>
    <button id="btnRemove">移除</button>
    <button id="btnReplace">替换</button>
    <button id="btnInsert">前置</button>
</div>

</body>
<script>


    /**
     *   改变dom结构
     *      append
     *      removeChild
     *      replaceChild
     *      insertBefore
     *
     *
     * */

    var btnRemvoe = document.getElementById('btnRemove');

    var btnReplace = document.getElementById('btnReplace');
    var btnInsert = document.getElementById('btnInsert');


    btnRemvoe.onclick = function () {
        var innerBox = document.getElementById('innerBox');

        var box1 = document.getElementById('box1');

        box1.removeChild(innerBox);
    }


    btnReplace.onclick =function (){

        var box1 = document.getElementById('box1');

        var innerBox = document.getElementById('innerBox');

        var newBox = document.createElement('div');
        newBox.innerText = 'new box';

        box1.replaceChild(newBox,innerBox);


    }

    btnInsert.onclick = function (){

        var innerBox = document.getElementById('innerBox');

        var newBox = document.createElement('div');
        newBox.innerText = 'new box in the top ';

        innerBox.parentElement.insertBefore(newBox,innerBox);






    }

</script>
</html>